<template>
  <div class="box">
    <div class="guesslike">
      <h4>猜你喜欢</h4>
      <section class="order">
        <button>综合排序</button>
        <button @click="aesOrder">距离最近</button>
        <button @click="desOrder">销售最高</button>
        <button>筛选</button>
      </section>
      <section class="sole">
        <span>年货节热卖</span>
        <span>津贴联盟</span>
        <span>满减优惠</span>
        <span>品质联盟</span>
      </section>
    </div>
    <main>
      <div class="good" v-for="(item, index) in list" :key="index" @click="goSort">
        <div class="img-box">
          <img :src="item.pic" alt="" />
        </div>
        <section>
          <h2>{{ item.name }}</h2>
          <div class="price">
            <span style="color: orange">{{ item.star }}</span
            >&nbsp;&nbsp;
            <span>月售{{ item.sale }}</span>
          </div>
          <div class="desc">
            <span>{{ item.desc }}</span>
            <span>{{ item.distance }}{{ item.yuan }} </span>
            &nbsp;
            <span>{{ item.desc1 }}</span>
            <span style="color: orange">{{ item.distance1 }}km</span>
          </div>
        </section>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "StoreList",
  data() {
    //定义响应式数据
    return {
      list: [
        {
          pic: "http://5b0988e595225.cdn.sohucs.com/images/20190110/ff83a6ebbdda41a1aad6dc97d9c6873b.jpeg",
          name: "金百家烤鸭（苏家坨店）",
          star: "4.3",
          sale: "1632",
          desc: "起送￥20",
          distance: "起送距离￥3",
          yuan: "￥6",
          desc1: "47分钟",
          distance1: "3.9",
          price: 88880,
        },
        {
          pic: "http://img95.699pic.com/photo/50158/5548.jpg_wh300.jpg",
          name: "稻香金源饺子馆",
          star: "4.4",
          sale: "230",
          desc: "起送￥20",
          distance: "配送￥3.5",
          yuan: "￥4.5",
          desc1: "44分钟 ",
          distance1: "2.5",
          price: 88880,
        },
        {
          pic: "http://picnew10.photophoto.cn/20160611/shengdanjiekaohuojimeishitupian-26432343_1.jpg",
          name: "金百家烤鸭（苏家坨店）",
          star: "4.5",
          sale: "632",
          desc: "起送￥20",
          distance: "起送距离￥3.3",
          yuan: "￥6.7",
          desc1: "37分钟",
          distance1: "3.8",
          price: 88880,
        },
        {
          pic: "http://img95.699pic.com/photo/50134/5024.jpg_wh300.jpg!/fh/300/quality/90",
          name: "稻香金源饺子馆",
          star: "3.4",
          sale: "2130",
          desc: "起送￥20",
          distance: "配送￥3.5",
          yuan: "￥4.5",
          desc1: "44分钟 ",
          distance1: "4.5",
          price: 88880,
        },
        {
          pic: "http://pic.5tu.cn/uploads/allimg/1908/pic_5tu_big_201907211521174374.jpg",
          name: "金百家烤鸭（苏家坨店）",
          star: "4.3",
          sale: "1902",
          desc: "起送￥20",
          distance: "起送距离￥3",
          yuan: "￥6",
          desc1: "47分钟 ",
          distance1: "3.9",
          price: 88880,
        },
        {
          pic: "http://img95.699pic.com/photo/50115/1992.jpg_wh300.jpg!/fh/300/quality/90",
          name: "稻香金源饺子馆",
          star: "4.4",
          sale: "550",
          desc: "起送￥20",
          distance: "配送￥3.5",
          yuan: "￥4.5",
          desc1: "44分钟 ",
          distance1: "2.9",
          price: 88880,
        },
      ],
    };
  },
  methods: {
      aesOrder() {
        let arr = [...this.list];
        arr.sort((a, b) => a.distance1 - b.distance1);
        this.list = arr
        return this.list;
      },
      desOrder(){
        let arr1 = [...this.list];
        arr1.sort((a,b)=> b.sale - a.sale);
        this.list = arr1;
        return this.list;
      },
      goSort(){
        this.$router.push("/Sort")
      }
    },
   
  }


  //点击升序按钮
 
</script>

<style lang="css" scoped>
.guesslike {
  background-color: rgb(251, 251, 251);
  height: 80px;
  border-radius: 7px;
}
.guesslike section {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.guesslike .sole span {
  background-color: lightgray;
  padding: 5px 5px;
  margin-top: 15px;
  border-radius: 5px;
}
.box {
  margin: 5px 10px 1px;
  /* background-color: rgba(200, 255, 0, 0.73); */
  /* height: 260px; */
  border-radius: 7px;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
main {
  margin-top: 10px;
  /* background-color: rgb(255, 0, 238); */
  flex: 1;
  overflow: auto;
  border-radius: 7px;
}

main .good {
  display: flex;
  height: 100px;
  background-color: rgb(251, 251, 251);
  margin: 5px 0 5px;
  border-radius: 5px;
  /* justify-content: space-between; */
}
main .good .img-box {
  width: 65px;
  height: 75px;
  margin-top: 12.5px;
  /* border: 1px solid red; */
  margin-right: 5px;
}
main .good .img-box img {
  width: 65px;
  height: 75px;
}
main .good section {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
main .good h2 {
  font-size: 16px;
}
main .good .price {
  font-size: 14px;
  color: gray;
}
main .good .desc {
  font-size: 10px;
  color: gray;
}
main .good .text {
  flex: 1;
}
</style>